<template>
  <div class="table">
    <el-table
      ref="multipleTable"
      :data="list.tbody"
      tooltip-effect="dark"
      style="width: 100%"

      @selection-change="handleSelectionChange">
      <el-table-column
        v-if="state == true"
        type="selection"
        width="80">
      </el-table-column>

      <el-table-column label="选择" width="80" align="center" v-if="radioShwo == true">
          <template slot-scope="scope">
              <el-radio class="radio" :label="scope.$index" v-model="radio" @change.native="getTemplateRow(scope.row)">&nbsp;</el-radio>
          </template>
      </el-table-column>

      <el-table-column
        v-for='(item,idx) in list.thead' :label="item.label"  :key='idx' align="center"  :show-overflow-tooltip='true'>
        <template slot-scope="scope">{{ scope.row[item.prop] }}</template>
      </el-table-column>
        <slot>
        </slot>
    </el-table>

    <div class="block" v-if="!pagination">
        <el-pagination
          @current-change="handleSizeChange"
          :page-sizes="[10]"
          :page-size="15"
           layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
    </div>

  </div>
</template>
<script>
    import { institutionList, logout,} from '@/api/institution/institution'
    export default {
      props :['thead','list','state','radioShwo','url','pagination','total',],
      data () {
        return {
          condition : '',
          currentRow: null,
          multipleSelection: [],
          radio :'',
        }
      },
      mounted () {

      },
      // watch : {
      //   currentPage (val) {
      //     console.log(val);
      //       this.currentPage = val;
      //     },
      //     deep:true
      //   },
      methods : {
        handleSizeChange (val) {//改变页数触发
            this.$emit('sizeChange',val)
        },
        toggleSelection(row) {
            if (row) {
              // rows.forEach(row => {
              //   console.log(row)
                this.$refs.multipleTable.toggleRowSelection(row,true);
              // });
            }
            // else {
            //   this.$refs.multipleTable.clearSelection();
            // }
          },
          handleSelectionChange(val) {
            this.$emit('changeData',val)
            this.multipleSelection = val;
          },
          getTemplateRow (val) {
            this.$emit('changeData',val)
          }
      }
    }
</script>
<style scoped>
  .el-pagination {
    /* position: absolute; */
    float: right;
    right: 50px;
    margin-top: 20px;
  }
  .table {
    margin-top: 10px;
  }

  .el-table th>.cell {
    text-align: center;
  }
  .el-table td, .el-table th.is-leaf {
    text-align: center;
  }
</style>
